<template>
  <div class="course-management">
    <div class="header-section">
      <h2>课程管理</h2>
      <div class="search-bar">
        <el-input
          v-model="searchForm.courseName"
          placeholder="课程名称"
          class="search-input"
        />
        <el-select
          v-model="searchForm.courseType"
          placeholder="课程类型"
          class="search-select"
        >
          <el-option label="全部" value="" />
          <el-option label="线上课程" value="online" />
          <el-option label="线下课程" value="offline" />
          <el-option label="混合式" value="hybrid" />
        </el-select>
        <el-button type="primary" @click="handleSearch">查询</el-button>
        <el-button @click="resetSearch">重置</el-button>
        <el-button type="success" @click="handleAdd">新增课程</el-button>
      </div>
    </div>

    <div class="table-section">
      <el-table :data="courseList" style="width: 100%">
        <el-table-column prop="id" label="序号" min-width="80" />
        <el-table-column prop="courseName" label="课程名称" min-width="200" />
        <el-table-column prop="courseType" label="课程类型" min-width="120">
          <template #default="scope">
            <el-tag v-if="scope.row.courseType === 'online'" type="primary">线上课程</el-tag>
            <el-tag v-else-if="scope.row.courseType === 'offline'" type="success">线下课程</el-tag>
            <el-tag v-else type="warning">混合式</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="teacher" label="授课老师" min-width="120" />
        <el-table-column prop="duration" label="课程时长" min-width="100" />
        <el-table-column prop="price" label="课程价格" min-width="100" />
        <el-table-column prop="status" label="课程状态" min-width="100">
          <template #default="scope">
            <el-tag v-if="scope.row.status === 'draft'" type="info">草稿</el-tag>
            <el-tag v-else-if="scope.row.status === 'published'" type="success">已发布</el-tag>
            <el-tag v-else-if="scope.row.status === 'ended'" type="danger">已结束</el-tag>
            <el-tag v-else type="warning">进行中</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="createTime" label="创建时间" min-width="160" />
        <el-table-column label="操作" min-width="200" fixed="right">
          <template #default="scope">
            <div style="display: flex; gap: 8px;">
              <el-button
                type="primary"
                size="small"
                @click="handleEdit(scope.row)"
                style="min-width: 60px;"
              >
                编辑
              </el-button>
              <el-button
                type="warning"
                size="small"
                @click="handlePublish(scope.row)"
                v-if="scope.row.status === 'draft'"
                style="min-width: 60px;"
              >
                发布
              </el-button>
              <el-button
                type="danger"
                size="small"
                @click="handleDelete(scope.row)"
                style="min-width: 60px;"
              >
                删除
              </el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <div class="pagination">
        <el-pagination
          v-model:current-page="pagination.currentPage"
          v-model:page-size="pagination.pageSize"
          :page-sizes="[10, 20, 50, 100]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </div>

    <!-- 添加/编辑课程对话框 -->
    <el-dialog
      v-model="dialogVisible"
      :title="dialogTitle"
      width="600px"
      @close="handleDialogClose"
    >
      <el-form :model="courseForm" label-width="100px">
        <el-form-item label="课程名称" required>
          <el-input v-model="courseForm.courseName" placeholder="请输入课程名称" />
        </el-form-item>
        <el-form-item label="课程类型" required>
          <el-radio-group v-model="courseForm.courseType">
            <el-radio label="online">线上课程</el-radio>
            <el-radio label="offline">线下课程</el-radio>
            <el-radio label="hybrid">混合式</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="授课老师" required>
          <el-input v-model="courseForm.teacher" placeholder="请输入授课老师姓名" />
        </el-form-item>
        <el-form-item label="课程时长" required>
          <el-input v-model.number="courseForm.duration" placeholder="请输入课程时长（分钟）" />
        </el-form-item>
        <el-form-item label="课程价格" required>
          <el-input v-model.number="courseForm.price" placeholder="请输入课程价格" />
        </el-form-item>
        <el-form-item label="课程简介">
          <el-input
            v-model="courseForm.description"
            type="textarea"
            placeholder="请输入课程简介"
            :rows="3"
          />
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogVisible = false">取消</el-button>
          <el-button type="primary" @click="handleSubmit">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'CourseManagement',
  data() {
    return {
      searchForm: {
        courseName: '',
        courseType: ''
      },
      courseList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      dialogVisible: false,
      dialogTitle: '',
      courseForm: {
        id: '',
        courseName: '',
        courseType: 'online',
        teacher: '',
        duration: '',
        price: '',
        description: '',
        status: 'draft'
      }
    }
  },
  mounted() {
    this.loadCourseList()
  },
  methods: {
    loadCourseList() {
      // 模拟数据
      this.courseList = [
        {
          id: 1,
          courseName: 'Web前端开发实战',
          courseType: 'online',
          teacher: '张老师',
          duration: 120,
          price: 299,
          status: 'published',
          createTime: '2023-10-15 10:30:00'
        },
        {
          id: 2,
          courseName: 'Vue3高级开发',
          courseType: 'offline',
          teacher: '李老师',
          duration: 180,
          price: 499,
          status: 'ongoing',
          createTime: '2023-10-16 09:00:00'
        },
        {
          id: 3,
          courseName: 'React全栈开发',
          courseType: 'hybrid',
          teacher: '王老师',
          duration: 240,
          price: 699,
          status: 'draft',
          createTime: '2023-10-17 14:20:00'
        },
        {
          id: 4,
          courseName: 'Node.js后端开发',
          courseType: 'online',
          teacher: '赵老师',
          duration: 150,
          price: 399,
          status: 'ended',
          createTime: '2023-10-10 11:15:00'
        },
        {
          id: 5,
          courseName: 'TypeScript实战',
          courseType: 'online',
          teacher: '孙老师',
          duration: 90,
          price: 199,
          status: 'published',
          createTime: '2023-10-18 16:45:00'
        }
      ]
      this.pagination.total = this.courseList.length
    },
    handleSearch() {
      // 这里实现搜索逻辑
      console.log('搜索参数:', this.searchForm)
      // 模拟搜索
      this.loadCourseList()
    },
    resetSearch() {
      this.searchForm = {
        courseName: '',
        courseType: ''
      }
      this.loadCourseList()
    },
    handleAdd() {
      this.dialogTitle = '新增课程'
      this.courseForm = {
        id: '',
        courseName: '',
        courseType: 'online',
        teacher: '',
        duration: '',
        price: '',
        description: '',
        status: 'draft'
      }
      this.dialogVisible = true
    },
    handleEdit(row) {
      this.dialogTitle = '编辑课程'
      this.courseForm = { ...row }
      this.dialogVisible = true
    },
    handlePublish(row) {
      this.$confirm('确定要发布该课程吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        // 这里实现发布逻辑
        console.log('发布课程:', row)
        row.status = 'published'
        this.$message({ type: 'success', message: '发布成功' })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消发布' })
      })
    },
    handleDelete(row) {
      this.$confirm('确定要删除该课程吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'danger'
      }).then(() => {
        // 这里实现删除逻辑
        console.log('删除课程:', row)
        const index = this.courseList.findIndex(item => item.id === row.id)
        if (index > -1) {
          this.courseList.splice(index, 1)
          this.pagination.total = this.courseList.length
        }
        this.$message({ type: 'success', message: '删除成功' })
      }).catch(() => {
        this.$message({ type: 'info', message: '已取消删除' })
      })
    },
    handleSubmit() {
      // 这里实现提交逻辑
      console.log('提交课程:', this.courseForm)
      if (this.courseForm.id) {
        // 编辑
        const index = this.courseList.findIndex(item => item.id === this.courseForm.id)
        if (index > -1) {
          this.courseList[index] = { ...this.courseForm }
        }
        this.$message({ type: 'success', message: '编辑成功' })
      } else {
        // 新增
        const newCourse = {
          ...this.courseForm,
          id: Date.now(),
          createTime: new Date().toLocaleString()
        }
        this.courseList.unshift(newCourse)
        this.pagination.total = this.courseList.length
        this.$message({ type: 'success', message: '新增成功' })
      }
      this.dialogVisible = false
    },
    handleDialogClose() {
      // 对话框关闭时的处理
    },
    handleSizeChange(size) {
      this.pagination.pageSize = size
    },
    handleCurrentChange(current) {
      this.pagination.currentPage = current
    }
  }
}
</script>

<style scoped>
.course-management {
  padding: 20px;
}

.header-section {
  margin-bottom: 20px;
}

.header-section h2 {
  margin-bottom: 15px;
  color: #303133;
}

.search-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}

.search-input {
  width: 200px;
}

.search-select {
  width: 150px;
}

.table-section {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
  box-shadow: 0 1px 4px rgba(0, 21, 41, 0.08);
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: flex-end;
}
</style>